<template>
    <el-drawer :close-on-click-modal="false" class="hm-drawer" size="70%" direction="rtl" v-model="show" :before-close="handleClose">
        <template #header>
            <div class="hm-box-title">商品借调</div>
        </template>
        <div class="hm-form-title">商品信息</div>
        <div class="product_information">
            <el-row class="hm-row3" :gutter="60">
                <el-col :span="8" class="label_value">
                    <div class="label">商品名称:</div>
                    <div class="value">{{ secondmentsData.styleName }}</div>
                </el-col>
                <el-col :span="8" class="label_value">
                    <div class="label">类目:</div>
                    <div class="value">{{ secondmentsData.categoryName }}</div>
                </el-col>
                <el-col :span="8" class="label_value">
                    <div class="label">商品编码:</div>
                    <div class="value">{{ secondmentsData.styleCode }}</div>
                </el-col>
            </el-row>
            <el-row class="hm-row3" :gutter="60">
                <el-col :span="8" class="label_value">
                    <div class="label">招商部门:</div>
                    <div class="value">{{ secondmentsData.recruiterDept }}</div>
                </el-col>
                <el-col :span="8" class="label_value">
                    <div class="label">招商员:</div>
                    <div class="value">{{ secondmentsData.recruiter }}</div>
                </el-col>
                <el-col :span="8" class="label_value">
                    <div class="label">产品部门:</div>
                    <div class="value">{{ secondmentsData.proDept }}</div>
                </el-col>
            </el-row>
            <el-row class="hm-row3" :gutter="60">
                <el-col :span="8" class="label_value">
                    <div class="label">品牌:</div>
                    <div class="value">{{ secondmentsData.brand }}</div>
                </el-col>
                <el-col :span="8" class="label_value">
                    <div class="label">机制:</div>
                    <div class="value">{{ secondmentsData.liveStreamingMechanism }}</div>
                </el-col>
                <el-col :span="8" class="label_value">
                    <div class="label">佣金:</div>
                    <div class="value">{{ secondmentsData.commission }}</div>
                </el-col>
            </el-row>
        </div>
        <div class="hm-form-title">商品现存</div>
        <div class="selection_history">
            <el-table :data="secondmentsData.datas" ref="refsTable" @select="select">
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column label="选品部门" align="center" prop="choosePerson" />
                <el-table-column label="选品时间" align="center" prop="choosePersonTimes" />
                <el-table-column label="是否售卖" align="center" prop="sellingFlag" />
                <el-table-column label="库存数量" align="center" prop="inventory" />
            </el-table>
        </div>
        <template #footer>
            <div style="flex: auto">
                <el-button type="primary" @click="confirmClick">关闭</el-button>
            </div>
        </template>
    </el-drawer>
</template>
<script setup name="Secondments" lang="ts">
import { ElTable } from 'element-plus'
import { SecondmentsVO } from '@/api/group/selectionSupermarket/types'
const refsTable = ref<InstanceType<typeof ElTable>>()
const ids = ref<Array<string | number>>([]);
const props = defineProps({
    secondmentsVisible: {
        type: Boolean,
        default: false
    },
    secondmentsData: {
        type: Object,
        default: false
    }
});
const show = computed(() => props.secondmentsVisible);
const emits = defineEmits(['doClose'])
const handleClose = () => {
    emits('doClose')
}

const select = (selection:SecondmentsVO[], row:SecondmentsVO) => {
    refsTable.value?.clearSelection()
    ids.value = []
    // 判断selection是否有值存在
    if (selection.length === 0) return
    refsTable.value?.toggleRowSelection(row, true);
    ids.value = selection.length ? [row.id] : []
};


/** 到样确认 */
const confirmClick = () => {
    handleClose()
}
</script>
<style scoped lang="scss">
.hm-form-title {
    font-size: 16px;
    font-weight: bold;
    color: #1a1b1c;
}

.hm-box-title {
    font-size: 21px;
    font-weight: bold;
    color: #1a1b1c;
    padding-bottom: 24px;
    border-bottom: 1px solid #f3f3f7;
}

.product_information {
    padding: 20px 20px;
}

.label {
    text-align: right;
    width: 120px;
}

.value {
    margin-left: 20px;
}

.label_value {
    display: flex;
    align-items: center;
    margin-top: 20px;
}

.selection_history {
    margin-top: 20px;
}
// 隐藏全选按钮
:deep(.el-table th.el-table__cell:nth-child(1) .cell) {
    visibility: hidden;
}
</style>